<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <form>
        <!-- v-model的修饰符 .trim 去掉两边空格 -->
        账号：<input type="text" v-model.trim="account" /> <br /><br />
        密码：<input type="password" v-model="password" /> <br /><br />
        <!-- v-model的修饰符: .number 可以把字符串转成数字 -->
        年龄：<input type="number" v-model.number="age" /> <br /><br />
        性别： 男<input type="radio" name="sex" value="male" v-model="sex" />
        女<input type="radio" name="sex" value="female" v-model="sex" />
        <br /><br />
        爱好：<br />
        抽烟<input type="checkbox" value="smoke" v-model="hobby" /> <br />
        喝酒<input type="checkbox" value="drink" v-model="hobby" /> <br />
        烫头<input type="checkbox" value="tt" v-model="hobby" /> <br />
        <br /><br />
        所属校区
        <select v-model="city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br /><br />
        其他信息：
        <!-- v-model的修饰符: .lazy 当表单元素失去焦点再获取用户输入的内容 -->
        <textarea v-model.lazy="info"></textarea> <br /><br />
        <input type="checkbox" v-model="isAgree" />阅读并接受<a
          href="http://www.atguigu.com"
          >《用户协议》</a
        >
        <button>提交</button>
      </form>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          account: '',
          password: '',
          age: 0,
          sex: '',
          // v-model和复选框配合使用特点:
          //   1. 如果绑定的数据是数组,则收据复选框的value值
          //   2. 如果绑定的数据是字符串或布尔值,则收集复选框的checked值
          hobby: [], //注意: 由于对应的是多个复选框,要收集多个复选框的value值,所以初始值应该是空数组
          city: '',
          info: '',
          isAgree: false,
        },
      })
    </script>
  </body>
</html>
